require('./Pagecxzjmain.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea,
  MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,
  MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter,Toast, Form,FormCell,Radio,Gallery,GalleryDelete,
  Uploader,TextArea,ActionSheet,Flex,FlexItem,SearchBar} from  'react-weui/build/packages'
import {Control} from 'react-keeper';
import construction  from './../../../assets/icon/zhzj/施工单位.png';


class Cxzjmain extends React.Component {

  constructor(props) {
    super(props);
    this.handleChange=this.handleChange.bind(this);
    this.handleCancel=this.handleCancel.bind(this);
  }

  handleChange(text){
    Actions.handleChange(text);
  }

  handleCancel(){
    Actions.handleCancel();
  }

  render() {
    return (
      <div>
        <SearchBar onChange={this.handleChange}
                   onCancel={this.handleCancel}
                   defaultValue=""
                   placeholder="请输入企业名称"
        >
        </SearchBar>

        {
          this.state.cxzjmain.searchDivShow && this.state.cxzjmain.searchData.length > 0 &&
          <div className="searchDisDiv" onClick={this.handleCancel}>
            <Panel>
              <PanelBody>
                {this.state.cxzjmain.searchData.map((item, i) => {
                  return (
                    <MediaBox type="appmsg" onClick={() => {
                      Control.go('/lsgdhome/lsgdgdDetail', {
                        pcode: item.pcode
                      })
                    }}>
                      <MediaBoxHeader>
                        <img src={construction} style={{
                          width: 30,
                          height: 30,
                          marginTop: 15
                        }}/>
                      </MediaBoxHeader>
                      <MediaBoxBody>
                        <MediaBoxTitle>{item.pname}</MediaBoxTitle>
                        <MediaBoxDescription>
                          {item.pcode}<br/>
                          <span className="pname">{item.city}</span>
                        </MediaBoxDescription>
                      </MediaBoxBody>
                    </MediaBox>
                  )
                })
                }

              </PanelBody>
            </Panel>
          </div>
        }

        <table width="100%" height="100%" style={{
          marginTop:10
        }}>
          <thead style={{
            fontSize:13,
            fontWeight:400,
            fontFamily: 'Arial Normal Arial',
            backgroundColor:"#CCCCCC",
            color:"#949494"
          }}>
          <tr>
            <th>排名</th>
            <th>企业名称</th>
            <th>类型</th>
            <th>信用等级</th>
            <th>明细</th>
          </tr>
          </thead>
          <tbody style={{
            textAlign:"center"
          }}>
          {
            this.state.cxzjmain.cxzjTableData.map((item,i)=>{
              return (
                <tr height={40} onClick={() => {
                  Control.go('/cxzjhome/cxzjdetail', {
                    detail: item
                  })
                }}>
                  <td width={"10%"} className="borderstyle">{i+1}</td>
                  <td width={"48%"} className="borderstyle">{item.name}</td>
                  <td width={"14%"} className="borderstyle">{item.type}</td>
                  <td width={"13%"} className="borderstyle">{item.xinyong}</td>
                  <td width={"13%"} className="borderstyle" style={{
                    color: "rgb(0, 153, 255)"
                  }}>查看</td>
                </tr>
              )
            })
          }
          </tbody>
        </table>
      </div>
    );
  }

  componentWillMount() {

  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.cxzjmain || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(Cxzjmain, Reflux.connect(Store, 'cxzjmain'));


export default Cxzjmain ;
